<template>
	<view class="">
		<view class="item" v-for="item in list" :key="item.hx_group_id">
			<image :src="item.avatar" mode="aspectFill"></image>
			<view class="name">
				{{item.name}}
			</view>
			<view class="btn" @click="gogive(item.hx_group_id)">
				选择
			</view>
		</view>
		
		<noDatas :xxxList="list"  :status="status"></noDatas>
	</view>
</template>

<script>
	import {
		memberGroupList,
		
	} from "../../api/hx.js"
	export default{
		data(){
			return{
				list:[],
				status: 'nomore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		onLoad() {
			this.getlist()
		},
		methods:{
			gogive(id){
				uni.navigateTo({
					url:"/pageUser/redEnvelope/giveRedEnvelope?type=1&id="+id
				})
			},
			getlist() {
				memberGroupList().then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.item{
		width: 690rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		>image{
			width:80rpx ;
			height: 80rpx;
			margin-left: 20rpx;
			border-radius: 20rpx;
		}
	}
	.name{
		width: 400rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #333333;
		margin-left: 24rpx;
		 white-space: nowrap;
		            overflow: hidden;
		            text-overflow: ellipsis;
	}
	.btn{
		width: 126rpx;
		height: 60rpx;
		background: #FF5959;
		border-radius: 208rpx 208rpx 208rpx 208rpx;
		text-align: center;
		line-height: 60rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>